<template>
	<view class=" flex flex_column uselogin">
		<image src="../../../static/log0.png" mode="" class="logo"></image>
		<p class="title">注册</p>
		<view class="padding26">
			<el-form :model="form" :rules="rules" ref="ruleForm" class="demo-ruleForm-login">
				<el-form-item label="" prop="phone" class="el-form-item-login">
					<el-input prefix-icon="el-icon-user-solid" v-model="form.phone" class="el-input-login"
						placeholder="请输入手机号"></el-input>
				</el-form-item>
				<el-form-item label="" prop="code" class="el-form-item-login">
					<view class="input-s-div">
						<el-input prefix-icon="el-icon-s-goods" v-model="form.code" class="input-s el-input-login"
							placeholder="请输入验证码"></el-input>
						<text v-show="show" class="input-t" @click="getYan('ruleForm')">{{text}}</text>
						<text v-show="!show" class="input-t">{{count}}s</text>
					</view>
				</el-form-item>
				<el-form-item label="" prop="password" class="el-form-item-login">
					<el-input prefix-icon="el-icon-s-goods" v-model="form.password" class="el-input-login"
						placeholder="请设置登陆密码" show-password></el-input>
				</el-form-item>
				<el-form-item label="" prop="passwords" class="el-form-item-login">
					<el-input prefix-icon="el-icon-s-goods" v-model="form.passwords" class="el-input-login"
						placeholder="请在次输入密码" show-password></el-input>
				</el-form-item>
			</el-form>
			<view class="login-btn">
				<button class="btn-size btn-b" @click="resect('ruleForm')">注册</button>
				<!-- <p class="login-btn-p" @click="userLogin()" v-if="type==1">直接登录</p> -->
				<p class="login-btn-p" @click="userLogins()"><text>已有账号？</text>去登录</p>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		get_reg_sms,
		person_register,
		checkPhoneUnique,
	}
	from "@/api/login"
	export default {
		data() {
			var checkPhone = (rule, value, callback) => {
				if (!value) {
					return callback(new Error("手机号不能为空"));
				} else {
					const reg = /^1[3-9][0-9]\d{8}$/;
					// 这里定义的reg变量没有加引号，所以是一种特殊的数据类型，即正则，可以直接用test()方法
					if (reg.test(value)) {
						callback();
					} else {
						// 具体错误信息没有提示
						return callback(new Error("请输入正确的手机号"));
					}
				}
			};
			return {
				show: true,
				text: '获取验证码',
				type: 0,
				count: 60,
				title: "",
				placeholder: "",
				error: false,
				form: {},
				password: "password",
				rules: {
					phone: [{
						required: true,
						message: '请输入手机号',
						trigger: 'blur'
					}, {
						validator: checkPhone,
						trigger: "blur"
					}],
					password: [{
						required: true,
						message: '请输入密码',
						trigger: 'blur'
					}],
					code: [{
						required: true,
						message: '请输入验证码',
						trigger: 'blur'
					}],
					passwords: [{
						required: true,
						message: '请再次输入密码',
						trigger: 'blur'
					}]
				}
			};
		},
		onLoad(option) {
			this.type = option.id
		},
		methods: {
			getYan(formName) {
				this.$refs[formName].validateField("phone", (res) => {
					console.log(res);
					if (!res) {
						const TIME_COUNT = 60;
						if (!this.timer) {
							this.count = TIME_COUNT;
							this.show = false;
							this.timer = setInterval(() => {
								if (this.count > 0 && this.count <= TIME_COUNT) {
									this.count--;
								} else {
									this.show = true;
									this.text = "重新获取"
									clearInterval(this.timer);
									this.timer = null;
								}
							}, 1000)
						}
						console.log("进来了");
						let obj = {
							phonenumber: this.form.phone
						}
						get_reg_sms(obj).then(res => {
							console.log(res.msg);
							if (res.code == 200) {
								uni.showToast({
									title: res.msg,
									icon: 'success'
								})
							} else {
								uni.showToast({
									title: res.msg,
									icon: 'error'
								})
							}

						})
					} else {

					}

				})
			},
			resect(formName) {
				if (this.form.password != this.form.passwords) {
					uni.showToast({
						title: "两次密码不一致",
						icon: 'error'
					})
					return
				}
				this.$refs[formName].validate((valid) => {
					if (valid) {
						checkPhoneUnique(this.form.phone).then(res => {
							if(res.data){
								let params = {
									"clientId": "eeb9377d4b6debbc0a6e8756bbbbb4c7",
									"grantType": "phonePassword",
									"tenantId": "000001",
									"password": this.password,
									"phonenumber": this.form.phone,
									"smsCode": this.form.code,
									"userType": "application_user"
								}
								person_register(params).then(res => {
									console.log(res.data);
									if (res.code == 200) {
										uni.showToast({
											title: res.msg,
											icon: 'success'
										})
										setTimeout(() => {
											uni.navigateTo({
												url: "/pages/login/login"
											})
										}, 500)
									} else {
										uni.showToast({
											title: res.msg,
											icon: 'error'
										})
									}
								
								})
							}else{
								uni.showToast({
									title: "手机号已注册",
									icon: 'error'
								})
							}
							


						}).catch((res => {
							uni.showToast({
								title: res.msg,
								icon: 'error'
							})
							return
						}))

					} else {
						console.log('error submit!!');
						return false;
					}
				})

			},
			
			userLogins() {
				uni.navigateTo({
					url: "/pages/login/login"
				})
			}

		}
	}
</script>
<style lang="scss">
	::v-deep .el-form-item__error {
		position: absolute;
		top: 50px;
	}
</style>

<style lang="scss" scoped>
	.uselogin {
		.logo {
			// margin-top: 44px;
			margin-bottom: 24px;
			width: 100%;
			height: 25vh;
			border-radius: 12px 12px 12px 12px;
		}

		.input-s-div {
			width: 100%;
			position: relative;
			right: 0;
			height: 100%;

			.input-t {
				position: absolute;
				right: 15px;
				top: 0px;
				font-size: 14px;
				font-family: 'HarmonyOS Sans SC-Regular, HarmonyOS Sans SC';
				font-weight: 400;
				color: #2F6CBC
			}
		}

		// width: 100%;
		// height: 100%;
		.login-btn {
			margin-top: 32px;
			width: 100%;
		}

		// .logo {
		// 	margin-top: 44px;
		// 	margin-bottom: 24px;
		// 	width: 72px;
		// 	height: 72px;
		// 	border-radius: 12px 12px 12px 12px;
		// }

		.title {
			margin-bottom: 24px;
			text-align: center;
			font-size: 24px;
			font-family: 'Source Han Sans CN-Regular, Source Han Sans CN';
			font-weight: 400;
			color: #3D3D3D;
		}

		.input {
			width: 100%;
			position: relative;

			.el-input {
				margin-top: 16px;
				border-bottom: 1px solid #eeeff3;
				border: none;
				height: 40px;
			}



			.el-input__inner {
				border: none;
				border-bottom: 1px solid #eeeff3;
			}


			.input-p {
				line-height: 20px;
				position: absolute;
				// width: 120px;
				height: 20px;
				font-size: 12px;
				font-family: 'HarmonyOS Sans SC-Regular, HarmonyOS Sans SC';
				font-weight: 400;
				color: #FF7474;
			}
		}

		.password {
			position: relative;

			.el-icon-view {
				position: absolute;
				top: 20px;
				right: 0;
			}
		}

		.forget {
			width: 100%;
			display: flex;
			justify-content: space-between;
			margin-top: 40px;
			height: 16px;
			font-size: 12px;
			font-family: 'HarmonyOS Sans SC-Regular, HarmonyOS Sans SC';
			font-weight: 400;
			color: #646466;
			// background-color: #1C53D9;
		}

		.uselogin {
			margin-top: 20px;
			width: 115px;
			height: 30px;
			border-radius: 17px 17px 17px 17px;
			opacity: 1;
			border: 1px solid #1C53D9;
			font-size: 14px;
			font-family: 'Source Han Sans CN-Regular, Source Han Sans CN';
			font-weight: 400;
			color: #1C53D9;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.btn-size {
			width: 100%;
			height: 48px;
			margin-bottom: 22px;
		}

		.login-footer {
			position: absolute;
			bottom: 46px;

			.login-footer-p {
				font-size: 11px;
				font-family: 'PingFangSC-Regular-Regular, PingFangSC-Regular';
				font-weight: 400;
				color: #646466;
				text-align: center;

				text {
					color: #1C53D9;
				}
			}
		}

		.login-btn-p {
			text {
				color: #8B8B8B;
			}

			text-align: center;
			font-size: 14px;
			font-family: 'HarmonyOS Sans SC-Regular, HarmonyOS Sans SC';
			font-weight: 400;
			color: #2F6CBC;
		}
	}
</style>
